<template>
  <div class="user">
    <!-- 导航栏区域 -->
    <van-nav-bar title="个人中心" left-arrow @click-left="onBack">
    </van-nav-bar>
    <!-- 登录/注册区域 -->
    <div class="login">
      <van-image
        round
        width="4rem"
        height="4rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        fit="cover"
        class="name"
        v-if="getLogin"
      />
      <van-button round @click="enterLogin" v-else> 登录/注册 </van-button>
    </div>
    <div class="box">
      <!-- 订单区域1 -->
      <van-cell-group inset class="mylist">
        <van-cell title="我的订单" is-link value="全部订单" />
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-icon name="card" size="30px" />待付款
          </van-grid-item>
          <van-grid-item>
            <van-icon name="shopping-cart" size="30px" />待配送
          </van-grid-item>
          <van-grid-item>
            <van-icon name="chat" size="30px" />待评价
          </van-grid-item>
        </van-grid>
      </van-cell-group>
      <!-- 区域2 -->
      <van-cell-group inset>
        <van-grid :border="false" :column-num="3" class="myshare">
          <van-grid-item>
            <van-icon name="bill-o" size="30px" />领券中心
          </van-grid-item>
          <van-grid-item>
            <van-icon name="vip-card-o" size="30px" />店铺会员
          </van-grid-item>
          <van-grid-item>
            <van-icon name="location-o" size="30px" />收货地址
          </van-grid-item>
        </van-grid>
        <van-grid :border="false" :column-num="3" class="myshare">
          <van-grid-item>
            <van-icon name="point-gift-o" size="30px" />试用领取
          </van-grid-item>
          <van-grid-item>
            <van-icon name="balance-list-o" size="30px" />退款售后
          </van-grid-item>
          <van-grid-item>
            <van-icon name="smile-o" size="30px" />活力中心
          </van-grid-item>
        </van-grid>
      </van-cell-group>
      <!-- 区域3 -->
      <van-cell-group inset style="margin-top: 14px">
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-icon name="free-postage" size="30px" />我的包裹
          </van-grid-item>
          <van-grid-item>
            <van-icon name="user-o" size="30px" />官方客服
          </van-grid-item>
          <van-grid-item>
            <van-icon name="newspaper-o" size="30px" />成就奖励
          </van-grid-item>
        </van-grid>
      </van-cell-group>
      <!-- 列表区域 -->
      <van-list>
        <van-card
          v-for="(item, index) in itemList"
          :key="index"
          :price="item.price"
          :desc="item.title"
          :title="item.qunTitle"
          :thumb="item.image"
          class="card"
        >
          <template #tags>
            <van-tag plain type="danger" class="box">{{
              item.expireMsg
            }}</van-tag>
            <van-tag plain type="danger">{{ item.rankingTag }}</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="enterDetails(item.id)"
              >详情</van-button
            >
            <van-button size="mini">立即购买</van-button>
          </template>
        </van-card>
      </van-list>
      <div class="exit">
        <van-button round type="info" @click="exit" v-if="getLogin"
          >退出登录</van-button
        >
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import { getItems } from "../../api/index";
// 引入想要使用的组件
import tabbar from "../../components//myTabbar/index.vue";
export default {
  data() {
    return {
      itemList: [],
      // loading: false,
      getLogin: localStorage.getItem("token"),
    };
  },
  components: {
    tabbar,
  },
  mounted() {
    this.getItems();
  },
  methods: {
    onBack() {
      this.$router.back(-1);
    },
    enterLogin() {
      this.$router.push("/login");
    },
    // 获取首页所有的商品
    getItems() {
      getItems({ start: 0 }).then((res) => {
        // console.log(res, "getItems的数据");
        // console.log(res.data.data.list, "list的数据");
        this.itemList = res.data.data.list;
      });
    },
    // 点击进入详情页
    enterDetails(id) {
      // console.log("点击进去详情的ID",id);
      this.$router.push("/detail/=" + id);
    },
    exit() {
      localStorage.clear();
      this.$router.go(0);
    },
  },
};
</script>

<style scoped>
.user {
  background-color: #e9ebef;
}
.login {
  height: 150px;
  background: linear-gradient(to right, #ff6034, #ee0a24);
  text-align: center;
  line-height: 130px;
}
.mylist {
  position: relative;
  top: -20px;
  left: 0;
}
.name {
  position: absolute;
  transform: translate(-50%, 50%);
}
.van-grid-item {
  font-size: 13px;
}
.card {
  margin: 10px 15px;
  background-color: #fff;
  border-radius: 10px;
}

.exit {
  text-align: center;
  /* margin-bottom: 50px; */
}
</style>